Vue Router

前端路由：URL中的hash(#号)与组件之间的关系。

比如：当请求连接为：localhost:7000/#/emp 时，返回empt组件；当请求连接为：localhost:7000/#/dept时，返回dept组件。

vue router是vue的官方路由。由以下几个部分组成：

• VueRouter: 路由器类，根据路由请求在路由视图中动态渲染选中的组件。
• <router-link>: 请求链接组件，浏览器会解析成<a>。
• <router-view>: 动态视图组件，用来渲染展示与路由路径对应的组件。

安装

在项目中运行以下命令安装
yarn add [email protected]

定义路由

在vue新建项目的src/router/index.js文件中定义。

const routes = [

  {

    path: "/emp",

    name: "emp",

    component: () => import("../views/tlias/EmpView.vue")

  },

  {

    path: "/dept",

    name: "dept",

    component: () => import("../views/tlias/DeptView.vue")

  },
  {

    path: "/",

    redirect: "/dept" // 重定向

  }

];

在组件中用router-link定义链接，如在EmpView.vue中员工管理的菜单中定义

<el-menu-item index="1-2">

                <router-link to="/emp"> 人员管理 </router-link>

              </el-menu-item>

在App.vue组件中用router-view动态加载对应视图

<template>

  <div>

    <!-- <h1>{{ message }}</h1> -->

    <!-- <emp-view></emp-view> -->

    <router-view></router-view>

  </div>

</template>